<template>
    <div id="answer">
        <div class="top">
            <ul class="item">
                <li class="item-top">
                    <i class="iconfont icon-menufold icon20" ref="toggle" @click="slider_flag = !slider_flag"></i>
                    <i class="iconfont icon-r-paper" style="font-size:32px;"></i>
                    {{formData.examName}}
                </li>
                <li @click="flag = !flag" style="cursor:pointer">
                    <i class="iconfont icon-user icon20"></i>
                    <div class="msg" v-if="flag" @click="flag =!flag">
                        <p>姓名：{{userInfo.name}}</p>
                        <p>学号：{{}}</p>
                    </div>
                </li>
                <li><i class="iconfont icon-arrLeft icon20"></i></li>
            </ul>
        </div>
        <div class="flexarea">
            <transition name="slider-fade">
                <div class="left" v-if="slider_flag">
                    <ul class="l-top">
                        <li>
                            <a href="javascript:;"></a>
                            <span>当前</span>
                        </li>
                        <li>
                            <a href="javascript:;"></a>
                            <span>未答</span>
                        </li>
                        <li>
                            <a href="javascript:;"></a> 
                            <span>已答</span>
                        </li>
                        <li>
                            <a href="javascript:;"></a>
                            <span>标记</span>
                        </li>
                    </ul>
                    <div class="l-bottom">
                        <div class="item">
                            <p>单选题部分</p>
                            <ul>
                                <li v-for="(list,index0) in topic[0]" :key="index0">
                                    <a href="javascript:;" @click="change(index0)" :class="{
                                        border:
                                            index == index0 && 
                                            currentType == 0,
                                        bg:
                                            bg_flag &&
                                            topic[0][index0].isClick == true
                                    }">
                                        <span :class="{
                                        mark:
                                            topic[0][index0].isMark == true,
                                        }">
                                        </span>
                                        {{index0+1}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="item">
                            <p>多选题部分</p>
                            <ul>
                                <li v-for="(list,index1) in topic[1]" :key="index1">
                                    <a href="javascript:;" @click="change1(index1)" :class="{
                                        border:
                                            index == index1+topic[0].length && 
                                            currentType == 1,
                                        bg:
                                            bg_flag &&
                                            topic[1][index1].isClick == true
                                    }">
                                        <span :class="{
                                        mark:
                                            topic[1][index1].isMark == true,
                                        }">
                                        </span>
                                        {{formData.type[0]+index1+1}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="item">
                            <p>判断题部分</p>
                            <ul>
                                <li v-for="(list,index2) in topic[2]" :key="index2">
                                    <a href="javascript:;" @click="judge(index2)" :class="{
                                        border:
                                            index == index2+topic[0].length+topic[1].length && 
                                            currentType == 2,
                                        bg:
                                            bg_flag &&
                                            topic[2][index2].isClick == true
                                    }">
                                        <span :class="{
                                        mark:
                                            topic[2][index2].isMark == true,
                                        }">
                                        </span>
                                        {{formData.type[0]+formData.type[1]+index2+1}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="item">
                            <p>填空题部分</p>
                            <ul>
                                <li v-for="(list, index3) in topic[3]" :key="index3">
                                    <a href="javascript:;" @click="fill(index3)" :class="{
                                    border:
                                        index == index3+topic[0].length+topic[1].length+topic[2].length &&
                                        currentType == 3,
                                    bg: bg_flag &&
                                        topic[3][index3].isClick == true
                                }"><span :class="{
                                    mark:
                                        topic[3][index3].isMark ==
                                        true,
                                }"></span>{{ formData.type[0] + formData.type[1]+formData.type[2]+index3 + 1 }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="item">
                                    <p>主观题部分</p>
                                    <ul>
                                        <li v-for="(list, index4) in topic[4]" :key="index4">
                                            <a href="javascript:;" @click="fill1(index4)" :class="{
                                border:
                                    index == index4 &&
                                    currentType == 4,
                                bg:
                                    bg_flag &&
                                    topic[4][index4].isClick ==
                                    true,
                            }"><span :class="{
                                mark:
                                    topic[4][index4].isMark ==
                                    true,
                            }"></span>{{
                                formData.type[0] +
                                formData.type[1] +
                                formData.type[2] +
                                formData.type[3] +
                                index4 +
                                1
                            }}</a>
                                        </li>
                                    </ul>
                        </div>
                        <el-button type="primary" style="width: 100%;font-size: 22px;margin: 25px 0 0 0;"
                            @click="submitAnswers()"> 结束考试</el-button>
                    </div>
                </div>
            </transition>
            <!-- 右边答题区 -->
            <transition name="slider-fade">
                <div class="right">
                    <div class="title">
                        <p style="font-size: 22px;">
                            <i class="iconfont icon-r-edit" style="font-size: 28px;"></i>
                            {{title }}
                        </p>
                        <i class="iconfont icon-right auto-right"></i>
                        <span>全卷共{{formData.type[0]+formData.type[1] + formData.type[2]+formData.type[3]+formData.type[4]+formData.type[5]}}题
                                <i class="iconfont icon-time"></i>倒计时：{{formattedRemainingTime}}<b></b>分钟
                        </span>
                    </div>
                    <div class="content">
                        <p class="topic">
                            <span class="number">
                                {{number}}
                            </span>
                            {{showQusetion}}
                        </p>
                        <div v-if="currentType == 0">
                            <el-radio-group v-model="temporary" @change="getChangeLabel">
                                <el-radio label="A">A</el-radio>
                                <el-radio label="B">B</el-radio>
                                <el-radio label="C">C</el-radio>
                                <el-radio label="D">D</el-radio>
                            </el-radio-group>
                        </div>
                        <div v-if="currentType==1">
                            <el-checkbox-group v-model="temp" @change="getMultiChangeLabel">
                                <el-checkbox label="A">A</el-checkbox>
                                <el-checkbox label="B">B</el-checkbox>
                                <el-checkbox label="C">C</el-checkbox>
                                <el-checkbox label="D">D</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="judge" v-if="currentType==2">
                            <el-radio-group v-model="temporary" @change="getJudgeLabel"
                                v-if="currentType == 2">
                                <el-radio label="√">√</el-radio>
                                <el-radio label="×">×</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="fill" v-if="currentType==3">
     
                                <el-input placeholder="请填在此处" v-model="temporary" clearable @blur="fillBG">
                                </el-input>
                           
                        </div>
                        <div v-if="currentType==4">
     
                                <el-input placeholder="请填在此处" v-model="temporary" clearable @blur="fillBG1">
                                </el-input>
                           
                        </div>
                    </div>
                    <div class="operation">
                        <ul class="end">
                            <li @click="previous()" style="font-size: 24px;">
                                <i class="iconfont icon-r-left" style="font-size: 32px;margin-right: 5px;"></i>
                                <span>上一题</span>
                            </li>
                            <li @click="mark()">
                                <span>标记</span>
                            </li>
                            <li @click="next()" style="font-size: 24px;">
                                <span>下一题 </span>
                                <i class="iconfont icon-r-right" style="font-size: 32px;margin-left: 5px;"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import { insert, update, getExamDate,getList } from '@/api/Questions/index';
import { saveAnswer } from '@/api/ExamStudent/index'
import { get } from '@/api/Exam/index';
import { Message } from 'element-ui';
import { get as getStu } from '@/api/Student/index'
import { mapState } from "vuex";
export default {
  data() {
    return {
      formData: {
        id: null, // 用于区分添加和修改
        grade: null,
        type: [0,0,0,0,0,0],//所有题目类型
        score:[0,0,0,0,0,0],//所有题型对应的分数
        examId: null,
        examName: '' // 新增字段用于存储考试名称
      },
      remainingTime: 0, // 剩余时间（分钟）
      timer: null, // 倒计时定时器
      startTime: null, // 考试开始时间
      bg_flag: false, //已答标识符,已答改变背景色
      isFillClick: false, //选择题是否点击标识符
      slider_flag: true, //左侧显示隐藏标识符
      flag: false, //个人信息显示隐藏标识符
      reduceAnswer:[],//临时存储题目信息
      zeroAnswer:[],//单选答案存储
      oneAnswer:[],//多选答案存储
      twoAnswer:[],//判断答案存储
      threeAnswer:[],//填空答案存储
      fourAnswer:[],//主观答案存储
      temporary:'',//除多选
      temp:[],//多选
      radio:[],//用于绑定所有题答案
      index: 0, //全局index
      title: "请选择正确的选项",
      currentType: 0,
      showQusetion:[],//当前显示题目信息
      showAnswer: {}, //当前题目对应的答案选项
      number: 1, //题号
      topic: {
                0: [], // 初始化为空数组
                1: [],
                2: [],
                4: [],
                5: [],
                6: []
                //试卷信息
            },
      userInfo: {
                //用户信息
                name: null,
                id: null,
      },
      rules: {
        questionName: [
          { required: true, message: '请输入题目名称', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' },
          { validator: this.validateAnswer, trigger: 'blur' }
        ],
        grade: [
          { required: true, message: '请输入分数', trigger: 'blur' }
        ],
        types: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        examId: [
          { required: true, message: '请选择所属考试', trigger: 'change' }
        ]
      },
      examIdOptions: [] // 考试选项
    };
  },
    computed: {
    formattedRemainingTime() {
        const minutes = Math.floor(this.remainingTime / 60); // 计算分钟数
        const seconds = Math.floor(this.remainingTime % 60); // 计算秒数
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    ...mapState({
      name: state => state.user.name,
      avatar: state => state.user.avatar,
      id: state => state.user.id,
      type: state => state.user.type
    })
    },
  methods: {

    getTableDataList() {
        console.log("question查找:",this.formData);
      getList(this.formData).then((res) => {
        console.log("打印题目返回集:",res.data.records);
                // 遍历返回的题目数据
        res.data.records.forEach(record => {
            const typeIndex = record.types; // 获取题目类型对应的下标
            const grade = record.grade; // 获取题目的分数
            let index = 0;

            // 如果 typeIndex 有效（非空且为数字），更新 formData.type 和 formData.score
            if (typeIndex !== null && !isNaN(typeIndex)) {
                // 更新 formData.type 的对应下标值
                if (this.formData.type[typeIndex] === undefined) {
                    this.formData.type[typeIndex] = 0; // 如果未定义，初始化为 0
                }
                this.formData.type[typeIndex] += 1; // 题目数量加 1

                // 确保 this.topic[typeIndex] 是一个数组
                if (!Array.isArray(this.topic[typeIndex])) {
                    this.topic[typeIndex] = [];
                }

                while(this.topic[typeIndex][index] !== undefined) {
                    index++;
                }
                this.topic[typeIndex][index] = record;
                
                // 更新 formData.score 的对应下标值
                if (this.formData.score[typeIndex] === undefined) {
                    this.formData.score[typeIndex] = 0; // 如果未定义，初始化为 0
                }
                this.formData.score[typeIndex] += grade; // 累加分数
            }
        });

        // 对每种题型的数组进行排序
        for (let type in this.topic) {
        if (Array.isArray(this.topic[type])) {
            this.topic[type].sort((a, b) => a.difficulty - b.difficulty);
        }
        }
        
        console.log("每条信息为",this.topic)
        // 将 formData.score 中的所有值累加到 formData.grade
        this.formData.score.forEach(score => {
            if (score !== undefined) {
                this.formData.grade += score; // 累加总分
            }
        });


        console.log("更新后的 formData.type:", this.formData.type);
        console.log("更新后的 formData.score:", this.formData.score);
        console.log("更新后的总分：",this.formData.grade);
        this.number = 1; // 初始化题号为1
        this.showQusetion = this.topic[0][0].questionName; // 获取第一题的题目内容
        this.$forceUpdate();
        }).catch((error) => {
            console.error("获取题目数据失败:", error);
      })
    },

    // 更新多选题答案字符串
    updateAnswerString() {
     this.formData.answer = this.formData.answerArray.join('');
    }, 
    // 自定义答案验证
    validateAnswer(rule, value, callback) {
      if (this.formData.types === 1) {
        if (this.formData.answerArray.length === 0) {
          callback(new Error('请选择答案'));
        } else {
          callback();
        }
      } else {
        if (!value) {
          callback(new Error('请输入答案'));
        } else {
          callback();
        }
      }
    },
    initCountdown() {
        const examDuration = this.formData.examDuration * 60; // 转换为秒
        console.log("时间：",examDuration)
      
        const remainingTime = localStorage.getItem('remainingTime');

        if (this.startTime) {
            // 如果有保存的开始时间，计算剩余时间
            this.startTime = new Date((this.startTime));
            console.log("开始时间：",this.startTime)
            const currentTime = new Date().getTime();
            console.log("现在时间：",currentTime)
            const elapsed = Math.floor((currentTime - this.startTime.getTime()) / 1000); // 已过去的时间（秒）
            console.log("剩余时间：",elapsed)
            this.remainingTime = Math.max(0, examDuration - elapsed);
            console.log("剩余时间111：",this.remainingTime)
        } else {
            // 如果没有保存的开始时间，设置当前时间为开始时间
            this.startTime = new Date();
            localStorage.setItem('startTime', this.startTime.getTime());
            this.remainingTime = examDuration;
        }

        // 保存剩余时间到 localStorage
        localStorage.setItem('remainingTime', this.remainingTime);

        this.startTimer();
    },
    startTimer() {
        this.timer = setInterval(() => {
            const currentTime = new Date().getTime();
            const elapsed = Math.floor((currentTime - this.startTime.getTime()) / 1000); // 已过去的时间（秒）
            this.remainingTime = Math.max(0, this.formData.examDuration * 60 - elapsed);

            // 更新 localStorage 中的剩余时间
            localStorage.setItem('remainingTime', this.remainingTime);

            if (this.remainingTime <= 0) {
            clearInterval(this.timer);
            this.submitAnswers(); // 提交答案
            }
        }, 1000);
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formData.types === 1) {
            // 多选题：将答案数组转换为字符串
            this.formData.answer = this.formData.answerArray.join('');
          }
          if (this.formData.id) {
            // 修改操作
            update(this.formData).then(() => {
              Message.success('修改成功');
              this.goBack();
            });
          } else {
            // 添加操作
            insert(this.formData).then(() => {
              Message.success('添加成功');
              this.goBack();
            });
          }
        }
      });
    },
    change(index){
        //单选
        this.temporary='';
        this.index=index;
        let reduceAnswer=this.topic[0][this.index];
        this.reduceAnswer=reduceAnswer;
        this.isFillClick=true;
        this.currentType=0;
        let len=this.topic[0].length;
        if(this.index<len){
            if(this.index<=0){
                this.index=0;
            }
            console.log(`总长度${len}`);
            console.log(`当前index:${index}`);
            this.title = "请选择正确的选项";
            let Data=this.topic[0];
            console.log("单选题题目:",Data);
            this.showQusetion=Data[this.index].questionName;//获取题目信息
            this.showAnswer=Data[this.index];
            this.number=this.index+1;
        } else if(this.index>=len)
        {
            this.index = 0;
            this.fill(this.index);
        }
    },
    change1(index){
        //多选
        this.temp=[];
        this.index=index+this.topic[0].length;
        let reduceAnswer = this.topic[1][index];
        this.reduceAnswer = reduceAnswer;
        this.isFillClick = true;
        this.currentType = 1; 
        let len=this.topic[0].length+this.topic[1].length;
        if(this.index<len){
            console.log(`总长度${len}`);
            console.log(`当前index:${this.index}`);
            this.title = "请选择正确的选项";
            let Data=this.topic[1];
            console.log("多选题题目:",Data);
            this.showQusetion=Data[index].questionName;//获取题目信息
            this.showAnswer=Data[index];
            this.number=this.index+1;
        } 
    },
    judge(index){
        //判断题
        this.temporary='';
        let len=this.topic[0].length+this.topic[1].length+this.topic[2].length;
        this.currentType = 2;
        this.index=this.topic[0].length+this.topic[1].length+index;
        if(this.index < len){
            console.log(`总长度${len}`);
            console.log(`当前index:${this.index}`);
            this.title = "请作出正确判断";
            let Data = this.topic[2];
            console.log(Data);
            this.showQusetion = Data[index].questionName; //获取题目信息
            this.number =this.index+1;
        }
    },
    fill(index){
        //填空题
        this.temporary='';
        let len=this.topic[0].length+this.topic[1].length+this.topic[2].length+this.topic[3].length;
        this.currentType = 3;
        this.index=this.topic[0].length+this.topic[1].length+this.topic[2].length+index;
        if(this.index < len){
            console.log(`总长度${len}`);
            console.log(`当前index:${this.index}`);
            this.title = "请在横线处填写答案";
            let Data = this.topic[3];
            console.log(Data);
            this.showQusetion = Data[index].questionName; //获取题目信息
            this.number =this.index+1;
        }

    },
    fill1(index){
        //主观题
        this.temporary='';
        let len=this.topic[0].length+this.topic[1].length+this.topic[2].length+this.topic[3].length+this.topic[4].length;
        this.currentType = 4;
        this.index=this.topic[0].length+this.topic[1].length+this.topic[2].length+this.topic[3].length+index;
        if(this.index < len){
            console.log(`总长度${len}`);
            console.log(`当前index:${this.index}`);
            this.title = "请在横线处填写答案";
            let Data = this.topic[4];
            console.log(Data);
            this.showQusetion = Data[index].questionName; //获取题目信息
            this.number =this.index+1;
        }

    },
    getChangeLabel(){
        //获取选择题作答选项
        // if(val){
        let data=this.topic[0];
        this.bg_flag = true;
        data[this.index]["isClick"] = true;
        // }
        /* 保存学生答题选项 */
        // let zeroanswer;
        // if(val == 1){
        //     zeroanswer = "A"
        // }
        // if(val == 2){
        //     zeroanswer = "B"
        // }
        // if(val == 3){
        //     zeroanswer = "C"
        // }
        // if(val == 4){
        //     zeroanswer = "D"
        // }
        this.zeroAnswer[this.index]=this.temporary;
        
    },
    getMultiChangeLabel(){
        let data=this.topic[1];
        this.bg_flag = true;
        data[this.index-this.topic[0].length]["isClick"] = true;
        this.oneAnswer[this.index-this.topic[0].length]=this.temp.join('');
    },
    getJudgeLabel(){
        let data=this.topic[2];
        this.bg_flag = true;
        data[this.index-this.topic[0].length-this.topic[1].length]["isClick"] = true;
        this.twoAnswer[this.index-this.topic[0].length-this.topic[1].length]=this.temporary
    },
    fillBG(){
        let data=this.topic[3];
        this.bg_flag = true;
        data[this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length]["isClick"] = true;
        this.threeAnswer[this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length]=this.temporary
    },
    fillBG1(){
        let data=this.topic[4];
        this.bg_flag = true;
        data[this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length-this.topic[3].length]["isClick"] = true;
        this.fourAnswer[this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length-this.topic[3].length]=this.temporary
    },
    previous(){
        //跳转上一题
        this.index--;
        console.log(this.index);
        console.log(this.currentType)
        switch(this.currentType){
            case 0:
                this.change(this.index);
                break;
            case 1:
                this.index=this.index-this.topic[0].length;
                console.log("inde为",this.index);
                this.change1(this.index);
                break;
            case 2:
                this.index=this.index-this.topic[0].length-this.topic[1].length;
                this.judge(this.index);
                break;
            case 3:
                this.index=this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length;
                this.fill(this.index);
                break;
            case 4:
                this.index=this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length-this.topic[3].length;
                this.fill1(this.index);
                break;
        }
        console.log("updated showQusetion:", this.showQusetion);
        console.log("updated number:", this.number);
    },
    mark(){
        //标记功能
        switch(this.currentType){
            case 0:
                this.topic[0][this.index]["isMark"]=true;
                break;
            case 1:
                this.topic[1][this.index-this.topic[0].length]["isMark"]=true;
                break;
            case 2:
                this.topic[2][this.index-this.topic[0].length-this.topic[1].length]["isMark"]=true;
                break;
            case 3:
                this.topic[3][this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length]["isMark"]=true;
                break;
            case 4:
                this.topic[4][this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length-this.topic[3].length]["isMark"]=true;
                break;
        }
    },
    next(){
        //下一题
        this.index++;
        console.log(this.index);
        console.log(this.currentType)
        switch(this.currentType){
            case 0:
                this.change(this.index);
                break;
            case 1:
                this.index=this.index-this.topic[0].length;
                console.log("inde为",this.index);
                this.change1(this.index);
                break;
            case 2:
                this.index=this.index-this.topic[0].length-this.topic[1].length;
                this.judge(this.index);
                break;
            case 3:
                this.index=this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length;
                this.fill(this.index);
                break;
            case 4:
                this.index=this.index-this.topic[0].length-this.topic[1].length-this.topic[2].length-this.topic[3].length;
                this.fill1(this.index);
                break;
        }
        console.log("updated showQusetion:", this.showQusetion);
        console.log("updated number:", this.number);
    },
    // 提交所有答案到后端
    submitAnswers() {
        clearInterval(this.timer);
        const answers = [];

        this.zeroAnswer.forEach((answer, index) => {
        answers.push({
            id: this.topic[0][index].id, // 使用题目 ID
            answer: answer
        });
        });

        this.oneAnswer.forEach((answer, index) => {
        answers.push({
            id: this.topic[1][index].id, // 使用题目 ID
            answer: answer
        });
        });

        this.twoAnswer.forEach((answer, index) => {
        answers.push({
            id: this.topic[2][index].id, // 使用题目 ID
            answer: answer
        });
        });

        this.threeAnswer.forEach((answer, index) => {
        answers.push({
            id: this.topic[3][index].id, // 使用题目 ID
            answer: answer
        });
        });

        this.fourAnswer.forEach((answer, index) => {
        answers.push({
            id: this.topic[4][index].id, // 使用题目 ID
            answer: answer
        });
        });

        console.log("0存储的数据为：",this.zeroAnswer);
        console.log("1存储的数据为：",this.oneAnswer);
        console.log("2存储的数据为：",this.twoAnswer);
        console.log("3存储的数据为：",this.threeAnswer);
        console.log("4存储的数据为：",this.fourAnswer);


        saveAnswer(answers,this.name)
        .then(response => {
            Message.success(response.data);
            this.goBack();
        })
        .catch(error => {
            console.error('提交答案失败', error);
            Message.error('提交答案失败，请稍后重试');
        });
    },
    // 返回上一页
    goBack() {
      this.$router.back();
    },
    toAnswer(examId){
      this.$router.push({path:"/TakeExam/answer",query:{examId:examId}})
    },
    init(){
        let id = localStorage.getItem('examId')
        let type = localStorage.getItem('examType')
        getStu(id).then((res) => {
        this.userInfo = res.data
        console.log("学生全信息",this.userInfo)
        console.log("学生姓名",this.userInfo.name)
        })
        console.log("学生信息",localStorage)
        
        
    }
  },
  mounted() {
    this.init();
    // 获取路由参数中的 examId
    const examId = this.$route.query.examId;
    console.log("获取到的 examId:", examId); // 打印 examId
    this.startTime = this.$route.query.takeTime; // 获取传入的 startTime
    console.log("获取到的时间", this.$route.query.takeTime);
    if (examId) {
      // 调用 get 方法获取考试详情
      get(examId).then((res) => {
        const examData = res.data; // 假设返回的数据中包含 examName
        this.formData.examDuration=examData.examDuration;
        this.formData.examName = examData.examName; // 绑定考试名称
        this.formData.examId = examId; // 保留 examId
        console.log("获取到的 formdata.examId:", this.formData.examId); // 打印 examId
        this.getTableDataList();
        // this.getTableDataList();
        this.initCountdown(); // 初始化倒计时
      }).catch((error) => {
        console.error("获取考试信息失败:", error);
        this.$message.error("获取考试信息失败，请稍后重试");
      });
    }
    // 获取考试选项
    getExamDate().then((res) => {
      this.examIdOptions = res.data;
    });
    // 如果有 id 参数，加载试题数据
    const id = this.$route.query.id;
    if (id) {
      get(id).then((res) => {
        const data = res.data;
        if (data.types === 1) {
          // 多选题：将字符串转换为数组
          data.answerArray = data.answer.split('');
        } else {
          data.answerArray = [];
        }
        this.formData = { ...data };
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  },
};
</script>

<style lang="scss" scoped>
.iconfont.icon-time {
    color: CornflowerBlue;
    margin: 0px 6px 0px 20px;
}

.analysis {
    margin-top: 20px;

    .right {
        color: #2776df;
        font-size: 18px;
        border: 1px solid #2776df;
        padding: 0px 6px;
        border-radius: 4px;
        margin-left: 20px;
    }

    ul li:nth-child(2) {
        margin: 20px 0px;
    }

    ul li:nth-child(3) {
        padding: 10px;
        background-color: #d3c6c9;
        border-radius: 4px;
    }
}

.analysis span:nth-child(1) {
    font-size: 18px;
}

.mark {
    position: absolute;
    width: 4px;
    height: 4px;
    content: "";
    background-color: red;
    border-radius: 50%;
    top: 0px;
    left: 22px;
}

.border {
    position: relative;
    border: 1px solid #ff90aa !important;
}

.bg {
    background-color: #5188b8 !important;
}

.fill .el-input {
    display: inline-flex;
    width: 150px;
    margin-left: 20px;

    .el-input__inner {
        border: 1px solid transparent;
        border-bottom: 1px solid #eee;
        padding-left: 20px;
    }
}

/* slider过渡效果 */
.slider-fade-enter-active {
    transition: all 0.3s ease;
}

.slider-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slider-fade-enter,
.slider-fade-leave-to {
    transform: translateX(-100px);
    opacity: 0;
}

.operation .end li:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: CornflowerBlue;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
}

.operation .end li {
    cursor: pointer;
    margin: 0 100px;
}

.operation {
    background-color: #fff;
    border-radius: 4px;
    padding: 10px 0px;
    margin-right: 10px;
}

.item-top {
    font-size: 24px;
}

.operation .end {
    display: flex;
    justify-content: center;
    align-items: center;
    color: CornflowerBlue;
}

.content .number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: CornflowerBlue;
    border-radius: 4px;
    margin-right: 4px;
}

.content {
    padding: 0px 20px;
}

.content .topic {
    padding: 20px 0px;
    padding-top: 30px;
}

.right .content {
    background-color: #fff;
    margin: 10px;
    margin-left: 0px;
    height: 470px;
}

.content .el-radio-group label {
    color: #000;
    margin: 5px 0px;
}

.content .el-radio-group {
    display: flex;
    flex-direction: column;
}

.right .title p {
    margin-left: 20px;
}

.flexarea {
    display: flex;
}

.flexarea .right {
    flex: 1;
}

.auto-right {
    margin-left: auto;
    color: #2776df;
    margin-right: 10px;
}

.right .title {
    margin-right: 10px;
    padding-right: 30px;
    display: flex;
    margin-top: 10px;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
}

.clearfix {
    clear: both;
}

.l-bottom .final {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    background-color: CornflowerBlue;
    width: 240px;
    margin: 20px 0px 20px 10px;
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    margin-top: 22px;
}

#answer .left .item {
    padding: 0px;
    font-size: 16px;
}

.l-bottom {
    border-radius: 4px;
    background-color: #fff;
}

.l-bottom .item p {
    margin-bottom: 15px;
    margin-top: 10px;
    color: #000;
    margin-left: 10px;
    letter-spacing: 2px;
}

.l-bottom .item li {
    width: 15%;
    margin-left: 5px;
    margin-bottom: 10px;
}

.l-bottom .item {
    display: flex;
    flex-direction: column;
}

.l-bottom .item ul {
    width: 100%;
    margin-bottom: -8px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.l-bottom .item ul li a {
    position: relative;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #eee;
    text-align: center;
    color: #000;
    font-size: 16px;
}

.left .l-top {
    display: flex;
    justify-content: space-around;
    padding: 16px 0px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #fff;
}

.left {
    width: 260px;
    height: 100%;
    margin: 10px 10px 0px 10px;
}

.left .l-top li:nth-child(2) a {
    border: 1px solid #eee;
}

.left .l-top li:nth-child(3) a {
    background-color: #5188b8;
    border: none;
}

.left .l-top li:nth-child(4) a {
    position: relative;
    border: 1px solid #eee;
}

.left .l-top li:nth-child(4) a::before {
    width: 4px;
    height: 4px;
    content: " ";
    position: absolute;
    background-color: red;
    border-radius: 50%;
    top: 0px;
    left: 16px;
}

.left .l-top li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.left .l-top li a {
    display: inline-block;
    padding: 10px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ff90aa;
}

#answer .top {
    background-color: CornflowerBlue;
}

#answer .item {
    color: #fff;
    display: flex;
    padding: 20px;
    font-size: 20px;
}

#answer .top .item li:nth-child(1) {
    margin-right: 10px;
}

#answer .top .item li:nth-child(3) {
    position: relative;
    margin-left: auto;
}

#answer {
    padding-bottom: 30px;
}

#answer li {
    list-style-type: none; /* 确保每个 li 也没有项目符号 */
}

#answer ul {
    list-style-type: none; /* 确保每个 li 也没有项目符号 */
}

.icon20 {
    font-size: 20px;
    font-weight: bold;
}

.item .msg {
    padding: 10px 15px;
    border-radius: 4px;
    top: 47px;
    right: -30px;
    color: #6c757d;
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

.item .msg p {
    font-size: 16px;
    width: 200px;
    text-align: left;
}
</style>
